<template>
  <div id="app">
    <h1>{{ msg }}</h1>

    <el-input style="width: auto"
              placeholder="请输入桶名称"
              v-model="bucketName"
              clearable>
    </el-input>

    <p></p>
    <el-row>
      <el-button type="primary" @click="submit1()">获取桶策略</el-button>
    </el-row>
    <p></p>

    <el-select v-model="value" placeholder="请选择桶策略类型">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <p></p>
    <el-row>
      <el-button type="primary" @click="submit2()">设置桶策略</el-button>
    </el-row>

    <p>{{data}}</p>

  </div>
</template>

<script>


  var OSS = require("oss-js-client");

  var ossClient = new OSS.Client({
    endPoint: "127.0.0.1",
    // endPoint: "192.168.1.40",
    port: 9000,
    useSSL: false,
    accessKey: "username",
    secretKey: "password",
  });

  export default {
    name: "VueOSSBucketPolicy",
    data() {
      return {
        bucketName: "mybucket2",
        options: [{
          value: 1,
          label: '匿名用户-只读'
        }, {
          value: 2,
          label: '匿名用户-只写'
        }, {
          value: 3,
          label: '匿名用户-可读写'
        }, {
          value: 4,
          label: '默认-私有的'
        }],
        value: '默认-私有的',
        data:'',
        msg: "演示OSSClient-BucketPolicy(桶策略)",
      };
    },
    methods: {

      submit1: function () {
        //获取存储桶策略
        //如果objectPrefix不为空，则也会根据对象权限过滤存储桶策略
        ossClient.getBucketPolicy(this.bucketName, (err, policy) => {
          if (err) {
            this.data=err
            return console.log(err, policy)
          }

          this.data = policy
          console.log(`Bucket policy file: ${policy}`)
        })

      },

      submit2: function () {
        //must be Between 1 and 4. value is READ_ONLY=1,WRITE_ONLY=2,READ_WRITE=3,NONE=4
        // let policyType = 4;  // 默认 NONE:4

        if (this.value === '默认-私有的') {
          this.value = 4
        }

        //设置存储桶策略
        ossClient.setBucketPolicy(this.bucketName, this.value, (err) => {
          if (err) throw err;

          console.log('Bucket policy set:' + this.value)
        })
        //说明:桶的策略决定了是否可以永久访问对象URL
      },

    },
  };
</script>

<style scope>
</style>
